import React, {useState, useEffect} from 'react'
import { Button, Table } from 'antd'
import useTopics from '../hooks/useTopics'
import { Routes, Route, Link, Navigate } from 'react-router-dom';

const Demo1 = () => {
    return <div>Demo1</div>
}

const Demo2 = () => {
    return <div>Demo2</div>
}

const AntdDemo = () => {
    const {topics} = useTopics()
    const columns = [
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '创建时间',
            dataIndex: 'create_at',
            key: 'create_at',
            render: (text)=>{
                return <h1>{new Date(text).toLocaleDateString()}</h1>
            }
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action'
        }
    ]
    return (
        <div>
            <h1>AntdDemo</h1>
            <Link to="demo1">Demo1</Link>
            <Link to="demo2">Demo2</Link>
            <Routes>
                <Route path="/" element={<Navigate to="demo1" replace />} />
                <Route path="demo1" element={<Demo1 />} />
                <Route path="demo2" element={<Demo2 />} />
            </Routes>
            <Table rowKey="id" dataSource={topics} columns={columns} />;
            {topics.map(topic=>{
                return <div key={topic.id}>{topic.title}</div>
            })}
        </div>
    )
}

export default AntdDemo